<script>
export default {
  name: 'List',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    listConfig: {
      type: Object,
      required: true
    },
    pagination: {
      type: Object,
      default: null
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('selection-change', val)
    },
    handleSizeChange(pageSize) {
      this.$emit('list-query', { pageNum: 1, pageSize })
    },
    handleCurrentChange(pageNum) {
      this.$emit('list-query', { pageNum })
    }
  },
  render(createElement, context) {
    const { columns, opts, selectType } = this.listConfig || {}
    const selectablePa = {
      selectable: this.listConfig.selectable
    }
    // 列表项
    let columnsEle = []
    columnsEle = columns.map(colDefine => {
      let slotScope = {}
      switch (colDefine.type) {
        case 'custom':
          slotScope = {
            scopedSlots: {
              default: (scope) => {
                return colDefine.render(scope.row)
              }
            }
          }
          break
        case 'img':
          slotScope = {
            scopedSlots: {
              default: (scope) => {
                return <img src={scope.row.imgUrl || ''} width='60' height='60' />
              }
            }
          }
          break
        case 'check':
          slotScope = {
            scopedSlots: {
              default: (scope) => {
                return <el-switch value={scope.row.check} on-change={(val) => colDefine.change(val, scope.row)}></el-switch>
              }
            }
          }
          break
        default:
          break
      }
      return <el-table-column
        key={colDefine.prop}
        label={colDefine.label}
        prop={colDefine.prop}
        align='center'
        {...slotScope}
      />
    })
    // 操作项
    let btnEle = null
    const actions = opts.buttons || []
    const filterActions = actions
    if (filterActions.length > 0) {
      const slotScope = {
        scopedSlots: {
          default: (scope) => {
            return filterActions.map(acItem => {
              return <el-button
                type='text'
                size='small'
                disabled={acItem.disabled(scope.row)}
                onClick={() => {
                  if (acItem.isConfirm) {
                    this.$confirm(acItem.msg, '提示', {
                      confirmButtonText: acItem.confirmText || '确定',
                      cancelButtonText: acItem.cancelText || '取消',
                      type: 'warning'
                    }).then(() => {
                      acItem.click(scope.row)
                    }).catch(() => {})
                  } else {
                    acItem.click(scope.row)
                  }
                }}
              >
                {acItem.text}
              </el-button>
            })
          }
        }
      }
      btnEle = (
        <el-table-column
          key='action'
          label='操作'
          align='center'
          {...slotScope}
        />
      )
    }
    return (
      <div>
        { this.listConfig.title && <p style='font-size: 16px; font-weight: 500'>{ this.listConfig.title }</p> }
        <el-table data={this.list} border on-selection-change={this.handleSelectionChange}>
          {
            selectType && (<el-table-column
              type={selectType}
              width='55'
              align='center'
              {...selectablePa}
            />)
          }
          { columnsEle }
          { btnEle }
        </el-table>
        { this.pagination && this.pagination.total > 0 && (
          <div class='pagination'>
            <el-pagination
              background
              layout='total, sizes, prev, pager, next, jumper'
              page-sizes={this.pagination.pageSizes}
              total={this.pagination.total}
              on-size-change={this.handleSizeChange}
              on-current-change={this.handleCurrentChange}
            />
          </div>)
        }
      </div>
    )
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
}
</style>
